<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>电磁辐射全景地图</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
    width:603px;
    padding-top:3px;
    overflow:hidden;
}
</style>
<script src="http://map.qq.com/api/js?v=2.exp&key=X5HBZ-2EIHS-I54OL-64JBU-4UFMV-GEBTO&libraries=convertor"></script>
<!-- <script src="http://api.map.soso.com/plugin/v2/PanoramaOverview/PanoramaOverview-min.js"></script> -->
<script>
function GetRequest() {
	   var url = location.search; //获取url中"?"符后的字串
	   var theRequest = new Object();
	   if (url.indexOf("?") != -1) {
	      var str = url.substr(1);
	      strs = str.split("&");
	      for(var i = 0; i < strs.length; i ++) {
	         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
	      }
	   }
	   return theRequest;
	}
//通过地图上的坐标获得全景地图id
function mapWithPano(panorama,pano_service,latlng){
   	pano_service.getPano(latlng, 200, function (result){
		panorama.setPano(result.svid);
        var x1 = result.latlng.lng;
        var y1 = result.latlng.lat;
        var x2 = latlng.getLng();
        var y2 = latlng.getLat();

        var alpha = Math.acos((y2 - y1) / Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
		if (x2 - x1 < 0) {
			alpha = Math.PI * 2 - alpha;
		}
		panorama.setPov({heading : alpha/Math.PI*180, pitch : 0});
	});
}

var init = function() {
	var Request=GetRequest();
	//创建插件实例 
	//var ovc=document.getElementById('container'); //地图容器（与街景连动的地图）
	//var overview = new soso.maps.PanoOverview(ovc,{ 
	//panorama:panorama 
	//}); 
	 
	//以下方法可获取连动地图的Map实例
	//获取后，可根据自己需要进行后续逻辑开发，如：在地图上标注、添加infowindow 或 覆盖物等
	//var map=overview.getMap();
	
	var marker;
    //转换百度坐标为腾讯坐标
    qq.maps.convertor.translate(new qq.maps.Point(Request['jd'], Request['wd']), 3, function(res){
        var latlng = res[0];
    	//创建普通地图实例
    	var map = new qq.maps.Map(document.getElementById("container"),{
    		center: latlng,
    		zoom: 13
    	});
    	//创建街景
    	var panorama = new qq.maps.Panorama('pano_holder');
    	//坐标吸附
    	var pano_service = new qq.maps.PanoramaService();
    	mapWithPano(panorama,pano_service,latlng);
        marker = new qq.maps.Marker({
            map : map,
            draggable:true,
            position : latlng
        });
        //条件marker拖动事件
        qq.maps.event.addListener(marker,'dragend',function(event){
        	mapWithPano(panorama,pano_service,event.latLng);
        });
        //添加街景高亮路网
        var pano_layer = new qq.maps.PanoramaLayer();
		pano_layer.setMap(map);
    	//添加街景覆盖物
   	 	var panolabel=new qq.maps.PanoramaLabel({
           altitude:30.0,
           panorama:panorama,
           position:latlng,
           content:decodeURI(Request['mc'])
       });
    });
}
</script>
</head>
<body onLoad="init()">
<div style="width:50%;height:500px;float: left;" id="container"></div>
<div style="width:50%;height:500px;float: left;" id="pano_holder"></div>
</body>
</html>